<template>
    <section>
        <el-dialog
                :title="materiel.id == 0 ? '添加农资' : '编辑农资' "
                :visible.sync="visible"
                :value="value"
                @close="close"
                width="450px"
        >
            <el-form
                    :model="materiel"
                    :rules="rules"
                    ref="materielForm"
            >
                <el-form-item
                        label="农资类别"
                        :label-width="labelWidth"
                        prop="materielType"
                >
                    <el-select
                            v-model="materiel.materielType"
                            placeholder="请选择农资类别"
                    >
                        <el-option
                                v-for="item in materielTypes"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                        label="名称"
                        :label-width="labelWidth"
                        prop="name"
                >
                    <el-input
                            v-model="materiel.name"
                            auto-complete="off"
                            maxlength="32"
                            suffix-icon="fa fa-vcard"
                            placeholder="请填写农资名称"
                    />
                </el-form-item>
                <el-form-item
                        label="供应商"
                        :label-width="labelWidth"
                        prop="producer"
                >
                    <el-input
                            v-model="materiel.producer"
                            auto-complete="off"
                            maxlength="11"
                            suffix-icon="fa fa-cloud"
                            placeholder="请填写农资供应商"
                    />
                </el-form-item>
                <el-form-item
                        label="规格"
                        :label-width="labelWidth"
                        prop="standard"
                >
                    <el-input
                            v-model="materiel.standard"
                            auto-complete="off"
                            maxlength="11"
                            suffix-icon="fa fa-window-restore"
                            placeholder="请填写农资规格"
                    />
                </el-form-item>
                <el-form-item
                        label="单位"
                        :label-width="labelWidth"
                        prop="unit"
                >
                    <el-select
                            v-model="materiel.unit"
                            placeholder="请选择农资单位"
                    >
                        <el-option
                                v-for="item in units"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                        label="单价"
                        :label-width="labelWidth"
                        prop="unitPrice"
                >
                    <el-input
                            v-model="materiel.unitPrice"
                            auto-complete="off"
                            maxlength="11"
                            suffix-icon="fa fa-money"
                            placeholder="请填写农资单价"
                    />
                </el-form-item>
                <!--<el-form-item-->
                <!--label="单位系数大小"-->
                <!--:label-width="labelWidth"-->
                <!--prop="unitFactorSize"-->
                <!--&gt;-->
                <!--<el-input-->
                <!--v-model="materiel.unitFactorSize"-->
                <!--auto-complete="off"-->
                <!--maxlength="11"-->
                <!--suffix-icon="fa fa-mobile"-->
                <!--placeholder="请填写农资单位系数大小(一组有多少)"-->
                <!--/>-->
                <!--</el-form-item>-->
                <el-form-item
                        label="成分"
                        :label-width="labelWidth"
                        prop="composition"
                >
                    <el-input
                            type="textarea"
                            v-model="materiel.composition"
                            auto-complete="off"
                            maxlength="128"
                            suffix-icon="fa fa-mobile"
                            placeholder="请填写农资成分"
                    />
                </el-form-item>
                <el-form-item
                        label="靶标"
                        :label-width="labelWidth"
                        prop="target"
                >
                    <el-input
                            type="textarea"
                            v-model="materiel.target"
                            auto-complete="off"
                            maxlength="200"
                            suffix-icon="fa fa-mobile"
                            placeholder="请填写靶标"
                    />
                </el-form-item>
            </el-form>
            <span
                    slot="footer"
                    class="dialog-footer"
            >
        <el-button
                size="small"
                @click="cancle('materielForm')"
        >取 消</el-button>
        <el-button
                size="small"
                type="primary"
                @click="submit('materielForm')"
        >确 定</el-button>
      </span>
        </el-dialog>
    </section>
</template>
<style>
</style>
<script>
    import {mapState} from "vuex";

    export default {
        name: "AddAndEdit",
        data() {
            return {
                visible: false,
                labelWidth: "100px",
                materielTypes: [],
                cooperatives: [],
                farmers: [],
                units: [],
                materiel: {
                    id: 0,
                    name: "",
                    standard: "",
                    composition: "",
                    unitPrice: "",
                    producer: "",
                    //unitFactorSize: "",
                    materielType: "",
                    unit: '',
                    target:''
                },
                options: [{code: true, name: "是"}, {code: false, name: "否"}],
                rules: {
                    name: [{required: true, message: "请输入名称", trigger: "blur"}],
                    standard: [{required: true, message: "请输入规格", trigger: "blur"}],
                    composition: [
                        {required: true, message: "请输入成分", trigger: "blur"}
                    ],
                    unitPrice: [{required: true, validator: this.$validator.decimalValid, trigger: "blur"}],
                    producer: [
                        {required: true, message: "请输入生产厂家", trigger: "blur"}
                    ],
                    // unitFactorSize: [
                    //   { required: true, message: "请输入单位系数大小", trigger: "blur" }
                    // ],
                    materielType: [
                        {required: true, message: "请选择农资类别", trigger: "blur"}
                    ],
                    unit: [
                        {required: true, message: "请选择单位", trigger: "blur"}
                    ]
                }
            };
        },
        computed: {
            ...mapState({
                codebooks: state => state.codebooks.codebooks
            })
        },
        watch: {
            value: {
                deep: true,
                immediate: true,
                handler: function (val) {
                    this.visible = val.show;
                    this.labelWidth = val.formLabelWidth || "120px";
                    if (val.materiel) {
                        this.materiel = val.materiel;
                    }
                    this.loadData();
                }
            },
            visible(val) {
                if (!val) this.$emit("on-show-change", this.$data);
            }
        },
        mounted() {
            this.materielTypes = this.codebooks ? this.codebooks.materielTypes : [];
            this.units = this.codebooks ? this.codebooks.units : [];
        },
        methods: {
            close() {
                this.cancle('materielForm');
            },
            cancle(formName) {
                this.visible = false;
                this.materiel = {
                    id: 0
                };
                this.$refs[formName].clearValidate();
            },
            loadData() {
                if (!this.materiel || !this.materiel.id || this.materiel.id <= 0) {
                    return;
                }
                this.$api.materiel.detail(this.materiel.id, result => {
                    this.materiel = result.materiel;
                    this.materiel.unit = this.materiel.unit ? this.materiel.unit.value : '';
                    this.$delete(this.materiel, "status");
                    this.materiel.materielType = this.materiel.materielType.value;
                });
            },
            submit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        const callback = () => {
                            this.cancle(formName);
                        };
                        this.materiel.id
                            ? this.$api.materiel.update(this.materiel, callback)
                            : this.$api.materiel.save(this.materiel, callback);
                    } else {
                        return false;
                    }
                });
            }
        },
        props: {
            value: {
                type: Object,
                default: function () {
                    return {
                        show: false,
                        formLabelWidth: "150px",
                        materiel: {
                            id: 0
                        }
                    };
                }
            }
        }
    };
</script>
